<!--
*@Author: QWP
*@Description: 合作结构，保险公司编辑
*@Date 2024-09-19 14:09
-->
<template>
  <u-dialog v-bind="$attrs"
    :confirmLoading="state.formLoading"
    @submit="submit"
    @close="dialogClose">
    <u-busi-card>
      <u-form ref="formRef" 
        :elements="state.elements" 
        :model="state.form">
      </u-form>
    </u-busi-card>
  </u-dialog>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, watch, useAttrs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useBaseStore, useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { alertC, confirmC, nullC, numberC, isValue, jsonCopy, messageC } from "@/util/common";
import * as cooprationApi from '@/service/administration/carCooperation'

const props = defineProps<{
  keyid: string
}>()

const attrs = useAttrs()
const emits = defineEmits(['success'])
const { userInfo } = storeToRefs(useLoginStore())
const { MECHANISMTYPE } = storeToRefs(useBaseStore())

const formRef = ref()

const formItemProps = {
  labelWidth: '100px',
  wrapperCol: { span: 24 },
};

const state = reactive({
  form: {
    address:"",
    mechanismname:'',
    mechanismperson:'',
    mechanismtype:'',
    paybank:'',
    paycard:'',
    phone:'',
    remark:'',
    keyid:'',
  },
  elements: [
    { label: '机构名称', key: 'mechanismname', col: { span: 24 }, element: 'input', 
      formItemProps: { ...formItemProps, required: true },
    },
    { label: '机构业务', key: 'mechanismtype', col: { span: 24 }, element: 'select', 
      formItemProps: { ...formItemProps, required: true },
      componentProps: {
        options: MECHANISMTYPE.value
      }
    },
    { label: '机构联系人', key: 'mechanismperson', col: { span: 24 }, element: 'input', 
      formItemProps: { ...formItemProps, required: false },
    },
    { label: '联系人电话', key: 'phone', col: { span: 24 }, element: 'input', 
      formItemProps: { ...formItemProps, required: false },
      componentProps: {  showCount: true  }
    },
    { label: '开户银行', key: 'paybank', col: { span: 24 }, element: 'input', 
      formItemProps: { ...formItemProps, required: false },
    },
    { label: '银行账号', key: 'paycard', col: { span: 24 }, element: 'input', 
      formItemProps: { 
        ...formItemProps, 
        required: false,
      },
      componentProps: {  showCount: true, }
    },
    { label: '机构位置', key: 'address', col: { span: 24 }, element: 'input', 
      formItemProps: { ...formItemProps, required: false },
    },
    { label: '备注', key: 'remark', col: { span: 24 }, element: 'textarea', 
      formItemProps: { ...formItemProps, required: false },
    },
  ],

  formLoading:false,
})

// 确认提交
async function submit(){
  try {
    await formRef.value.form.validate()
  } catch (error) {
    messageC("请先将表单信息填写完毕！");
    return  
  }

  const url = state.form.keyid ? 'update' : 'add';

  state.formLoading = true;
  try {
    const res = await cooprationApi[url](state.form)
    if(res.code == 0) {
      messageC(res.msg, 'success')
      emits('success')
      dialogClose()
    }
    else {
      messageC(res.msg, 'error');
    }
  } catch (error) {}
  state.formLoading = false
}

// 初始化表单信息
function initFormInfo() {
  state.form.fkuserid = userInfo.value['userId'],
  state.form.fkusername = userInfo.value['name'],
  state.form.fkdeptid = userInfo.value['deptId'],
  state.form.redeptname = userInfo.value['deptName'],
  state.form.fkunitsid = userInfo.value["unitId"];
}

// 数据回显
async function getHxData(){
  state.formLoading = true;
  try {
    const res = await cooprationApi.singleQuery(props.keyid)
    if(res.code == 0) {
      state.form = res.data
    }
  } catch (error) {}
  state.formLoading = false
}

// 弹窗关闭
function dialogClose() {
  formRef.value.form.resetFields();
  state.form = {}
}

watch(() => attrs.open, (nval, oval) => {
  if(nval == true) {
    initFormInfo()
    if(props.keyid) {
      state.form.keyid = props.keyid
      getHxData()
    }
  }
})
</script>
<style lang='scss'>
</style>